<template>
  <el-drawer
      size="50%"
      title="路由分支"
      direction="rtl"
      :model-value="modelValue"
      :destroy-on-close="true"
      :before-close="handleCancel"
  >
    <div class="form-wrapper">
      <el-form class="custom-form" ref="form" :rules="rules" :model="form" label-width="80px" label-position="top" :disabled="readOnly" @submit.left.prevent>
        <el-form-item label="组件名称" prop="name">
          <el-input class="custom-input custom-input-name"
                    v-model.trim="form.name"
                    type="text"
                    maxlength="15"
                    :show-word-limit="true">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="form-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {NodeDrawerDataModel} from "@/views/workTable/dataModel/NodeDrawerDataModel";

export default {
  props: {
    dialogData: Object,
    addNodeEventData: Object,
    readOnly: Boolean,
    show: Boolean,
  },

  emits: ['confirm', 'cancel'],

  data() {
    return {
      form: this.initForm(),
      rules: {
        name: [
          {
            required: true, message: '请输入名称', trigger: 'blur'
          }
        ],
      }
    }
  },

  computed: {
    modelValue: {
      get() {
        return this.show
      },

      set(val) {
        this.$emit('update:show', val)
      }
    }
  },

  watch: {
    show(val) {
      if (val) {
        if (this.dialogData && Object.keys(this.dialogData).length) {
          this.form = this.dialogData
        } else {
          this.form = this.initForm()
        }
      }
    }
  },

  methods: {
    initForm() {
      return {
        name: ''
      }
    },

    handleCancel() {
      this.$emit('cancel')
    },

    handleConfirm() {
      if (this.form.name.trim() === '') {
        this.$message.warning('请输入组件名称')
        return
      }

      this.$emit("confirm", new NodeDrawerDataModel({
        dialogData: this.form
      }))

      this.handleCancel()
    },
  }
}
</script>

<style scoped lang="scss">
.form-wrapper {

}

//.custom-input-name {
//  width: 440px;
//}

.custom-input-anchor-input {
  width: 104px;
}

.form-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.custom-form {
  flex: 1;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
